<template>
  <div>
    <VueWebRTC
      ref="webrtc"
      width="100%"
      :roomId="roomId"
      :enableLogs="true"
      v-on:joined-room="logEvent"
      v-on:left-room="logEvent"
      v-on:opened-room="logEvent"
      v-on:share-started="logEvent"
      v-on:share-stopped="logEvent"
      @error="onError"
    />
  </div>
</template>
<script setup>
import { VueWebRTC } from 'vue-webrtc'
import { onMounted, toRef } from 'vue'

const webrtc = toRef(null)
const roomId = toRef('public-room-v3')
function onCapture() {
  const img = webrtc?.value.capture()
  console.log('img::', img)
}
function onJoin() {
  webrtc?.value.join()
}
function onLeave() {
  webrtc.value.leave()
}
function onShareScreen() {
  const img = webrtc?.value.shareScreen()
  console.log('img::', img)
}
function onError(error, stream) {
  console.log('On Error Event', error, stream)
}
function logEvent(event) {
  console.log('Event : ', event)
}
onMounted(() => {
  console.log('webrtc.value.', webrtc.value)
  onJoin()
})
</script>
